<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* .box{
        width: 100px;
        height: 100px;
        background-color: yellow;
        margin: 50px  auto;
        transform: skewY(0deg);
    } */
    .box{
        width: 200px;
        margin: 50px  auto;
    }
    .hanhan{
        font-size: 50px;
        color: red;
    }
    .app{
        width: 100px;
        height: 100px;
        background-color: green;
        /* overflow: hidden; */
        visibility: hidden;
    }
    .showHidden-enter{
        opacity: 0;
    }
    .showHidden-enter-active{
        transform: translateX(100px);
        transition: all 2s;
    }
    .showHidden-enter-to{
        opacity: 1;
    }
    .showHidden-leave{
        opacity: 1;
    }
    .showHidden-leave-active{
        transform: translateX(-100px);
        transition: all 2s;
    }
    .showHidden-leave-to{
        opacity: 0;
    }
</style>
<script src="./js/vue.js"></script>
<body>
    <div class="app"></div>
    <div class="box">
        <!-- 显示   显示前   显示时 显示后 -->
        <!-- 
            控制一个元素的显示和隐藏
            display:none block
            opacity:0 - 1
            transform:rotateX(90) 及奇数倍数可以隐藏
            transform:rotateY(90) 及奇数倍数可以隐藏
            transform：sknewXY(90)及奇数倍数可以隐藏
            visibility: hidden;

            隐藏元素后有区别吗？（隐藏元素后占位还是不占位）
            不占位 display 
            剩余的都占位
         -->
         <!-- 
            显示
            显示前 opacity:0    v-enter
            
            显示中  过渡的状态 从无变有  v-enter-active
            显示后  opacity:1   v-enter-to
            隐藏
            隐藏前 opacity:1  v-leave
            
            隐藏中 过渡的状态 从有到无 v-leave-active
            隐藏后 opacity:0   v-leave-to

          -->
        <button @click="show=!show">显示隐藏</button>
        <transition name="showHidden">
            <h1 class="hanhan" v-show="show">涵涵</h1>
        </transition>
    </div>
    <script>
        const vm = new Vue({
            el:'.box',
            data:{
                show:true
            }
        })
    </script>
</body>
</html>